<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta  name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

	<style type="text/css">
		.row{
			margin-bottom: 20px;
		}
		.row .reo{
			margin-top: 10px;
			margin-bottom: 0;
		}

		/* 通配的方式 */
		[class*="col-"]{
			padding-top: 15px;
			padding-bottom: 15px;
			background-color: #eee;
			background-color: rgba(86, 61, 124, .15);
			border: 1px solid #ddd;
			border: 1px solid rgba(86, 61, 124, .2);
		}
	</style>
</head>
<body>
	<!-- 栅格最多一行只能承载12列 类似于表格 但是比表格好
	必须承载在容器里
	只需要更改col-md-里的md
	 -->
	<div class="container">
		<div class="row">
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
			<div class="col-md-1">col-md-1</div>
<!--			<div class="col-md-1">col-md-1</div>-->
		</div>
		<!--第13个，再多就会掉下去了
		 <div class="col-md-1">col-md-1</div> 
		-->

		<!-- 一个占3个的宽度 -->
		<div class="row">
		<div class="col-md-3">col-md-3</div>
		<div class="col-md-3">col-md-3</div>
		<div class="col-md-3">col-md-3</div>
		<div class="col-md-3">col-md-3</div>
		</div>

		<!-- 高度会根据内容进行增加 -->
		<div class="row">
		<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
		<div class="col-md-3">col-md-3</div>
		<div class="col-md-3">col-md-3</div>
		</div>

		<!-- 偏移 -->
		<div class="row">
			<!-- <div class="col-md-4">col-md-4</div> -->
			<!-- 向右偏移 col-md-offset-数字-->
		    <div class="col-md-4 col-md-offset-1">col-md-4</div>
		</div>

		<!-- 栅格里嵌套一个栅格 -->
		<div class="row">
			<div class="col-sm-12">
				one
				<div class="row">
					<div class="col-xs-6">
						first
					</div>
					<div class="col-xs-4 ">
						two
					</div>
				</div>
			</div>
		</div>

		<!-- 翻转内容 -->
		<div class="row">
			<!-- 原来 -->
			<div class="col-md-9">col-md-9</div>
			<div class="col-md-3">col-md-3</div>
			<!-- 翻转 -->
			<div class="col-md-9 col-md-push-3">col-md-9</div>
			<div class="col-md-3 col-md-pull-9">col-md-3</div>
		</div>
	</div>
</body>
</html>